﻿@model SearchBoxModel
@using Nop.Web.Models.Catalog;
@{
    var searchTooltip = T("Search.SearchBox.Tooltip");
}
@using (Html.BeginRouteForm("ProductSearch", FormMethod.Get, new {onsubmit = "return check_small_search_form()"}))
{
    <input type="text" class="search-box-text" id="small-searchterms" autocomplete="off" value="@searchTooltip" name="q" />
    @Html.Widget("searchbox_before_search_button")
    <input type="submit" class="button-1 search-box-button" value="@T("Search")" />
    <script type="text/javascript">
        $(document).ready(function() {
            $("#small-searchterms").focus(function() {
                if (this.value == '@T("Search.SearchBox.Tooltip")') {
                    this.value = '';
                }
            });

            $("#small-searchterms").blur(function() {
                if (this.value == '') {
                    this.value = '@searchTooltip';
                }
            });
        });

        function check_small_search_form() {
            var search_terms = $("#small-searchterms");
            if (search_terms.val() == "" || search_terms.val() == "@searchTooltip") {
                alert('@Html.Raw(HttpUtility.JavaScriptStringEncode(T("Search.EnterSearchTerms").Text))');
                search_terms.focus();
                return false;
            }
            return true;
        }
    </script>

    if (Model.AutoCompleteEnabled)
    {
        <text>
            <script type="text/javascript">
                $(function() {
                    $('#small-searchterms').autocomplete({
                            delay: 500,
                            minLength: @(Model.SearchTermMinimumLength.ToString()),
                            source: '@(Url.RouteUrl("ProductSearchAutoComplete"))',
                            select: function(event, ui) {
                                $("#small-searchterms").val(ui.item.label);
                                setLocation(ui.item.producturl);
                                return false;
                            }
                        })
                        .data("ui-autocomplete")._renderItem = function(ul, item) {
                            var t = item.label;
                            //html encode
                            t = htmlEncode(t);
                            return $("<li></li>")
                                .data("item.autocomplete", item)
                                .append("<a>@(Model.ShowProductImagesInSearchAutoComplete ? Html.Raw("<img src='\" + item.productpictureurl + \"'>") : null)" + t + "</a>")
                            .appendTo(ul);
                    };
                });
            </script>
        </text>
    }
    @Html.Widget("searchbox")
}